<template>
  <div class="mod-demo-echarts">
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <div id="J_chartBarBox" class="chart-box"></div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card>
            <div id="J_chart" class="chart-box"></div>
          </el-card>
        </el-col>


      </el-row>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data () {
      return {
        chartBar: null,
        chartLine: null,
        dataForm: {
          key: '',
          type:0
        },
        title:'',
        names:[],
        values:[],
        names1: [],
        values1: [],
        types: [{
          value: 0,
          label: '按会议室使用次数统计'
        }, {
          value: 1,
          label: '按人员预定次数统计'
        }]
      }
    },
    mounted () {
      this.getDataForm()
      this.getSize()
    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartBar) {
        this.chartBar.resize()
      }
      if (this.chartLine) {
        this.chartLine.resize()
      }
    },
    methods: {
      // 柱状图
      getDataForm () {
        this.$http({
          url: this.$http.adornUrl('/sys/material/scountmaterial'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.names = [];
            this.values = [];
            let val = data.scount
            let keys = Object.keys(val)
            for(var i=0;i<keys.length;i++){
              let name = ''
              switch (keys[i]) {
                case 'video':
                  name = '视频'
                      break;
                case 'img':
                  name = '图片'
                      break;
                case 'text':
                  name = '文档'
                      break;
                case 'music':
                  name = '音乐'
                      break;
                case 'amin':
                  name = '动画'
                      break;
                case 'app':
                  name = '应用'
                      break;
              }
              this.names.push(name)
              this.values.push(val[keys[i]])
              this.title = '素材数量统计'
            }
            this.init()
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      init(){
        console.log('names',this.names);
        console.log('values',this.values);
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          title:{
            text:this.title
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data:this.names
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '素材数量',
              type: 'bar',
              data: this.values
            }
          ]
        }
        this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      },
      getSize () {
        const url = '/sys/material/size'
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.names1 = data.name
            this.values1 = data.size
            this.init1()
          } else {
            // alert(data.msg)
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        })
      },
      init1() {
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}KB ({d}%)'
          },
          title:{
            text:'素材内存占比统计',
            left: 'center',
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: this.names1,
            formatter: function (name) {
              return name
            }
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '文件大小',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.values1
            }
          ]
        }
        this.chartLine = echarts.init(document.getElementById('J_chart'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      }
    }
  }
</script>
<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
</style>
